<breadcrumb />

<mat-card>
  <mat-card-content>
    <section>
      <h2>Receive email update</h2>
      <p>Showing a toggle to manage whether receive email update.</p>
      <mat-slide-toggle color="primary" [(ngModel)]="emailToggle">
        Receive email update
      </mat-slide-toggle>
    </section>

    <section>
      <h2>Music</h2>
      <p>Showing a disabled toggle to control music on/off status.</p>
      <mat-slide-toggle color="accent" [disabled]="true" [(ngModel)]="musicToggle">
        Music {{ musicToggle ? 'on' : 'off' }} (disabled)
      </mat-slide-toggle>
    </section>

    <section>
      <h2>Terms and conditions</h2>
      <p>Showing a required toggle to accept terms and conditions in a form.</p>
      <form #form="ngForm" (ngSubmit)="onFormSubmit()" ngNativeValidate>
        <mat-slide-toggle name="termsToggle" required ngModel>
          I agree to terms and conditions
        </mat-slide-toggle>
        <p>
          <button mat-raised-button type="submit">Submit</button>
        </p>
      </form>
    </section>
  </mat-card-content>
</mat-card>
